4B- el CURSUS 


Websites bouwen met KompoZer 


Internetcomponist 


N 


4 
WAT DOEN WE? 


WAARMEE? sitebouwer KompoZer. Á_ FREDERIK MEURIS 


MOEILIJKHEID? 


Downloaden en installeren 


KompoZer is volledig gratis te downloaden op Daar klik je 
op de grote oranje DownLoap!-knop. Vervolgens word je naar een pagina ge- 
bracht waar je de laatste versie van het programma kan binnenhalen. Verkies 
je een oudere uitgave, dan scroll je naar beneden. Druk opnieuw op de 
oranje knop en wacht tot het downloaden begint. Een voordeel van KompoZer 
is dat je het niet hoeft te installeren. Zodra het binnenhalen voltooid is, pak 
je het zip-bestand uit naar je harde schijf. Vervolgens blader je naar de re- 
sulterende map (waarschijnlijk met de naam KompoZer 0.710, tenzij er intus- 
sen een nieuwere versie beschikbaar is) en dubbelklik je op Kompozer (of 
Kompozer.exe) om het programma te starten. Wil je het pakket later verwijde- 
ren, dan volstaat het om de map in de Prullenbak te gooien. Wil je een snel- 
koppeling maken voor op je bureaublad, dan klik je met je rechtermuisknop 
op Kompozer. 
exe, en kies je 
voor KopIËREN NAAR 
en _ vervolgens 
BureauBLaD _(SNEL- 
KOPPELING MAKEN). 


Latest stable version: 0.7.10 (2007-08-30) 


& war? binary 
kompozer-0,7 nag (7.6 MB) - compled with VC++ 7.0 on Oygwin 
WeMacOS X ppc binary 
omporer-0.7.AD-mac,dmg (11.0 MB) - contrbuted by Sébastien Desvignes (ata bobo) 
successfudy tested on both PPC and Intel based Macs 


1486 tar.ag (10.3 MB) - built with gec/g** 4.0.3 on Linuw 26,15 
(8.2 MB) - successful tested on Debian Etch and Ubuntu 6.06 to 7.10 
(0.2 MB) - successtuby tested om PLS, Fedora Core 4 to 7 and Mandriva 2007 


OQ source code 
tactball (33.7 MB) - buit against Nvu 1.0 source code (Mozila aviary branch) 


KompoZer is beschikbaar voor verschillende besturings- 
systemen. 
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HOELANG? 
r zijn ontelbaar veel programma’s op de markt waarmee je je 


eigen website kan maken, het ene al wat gebruiksvriendelijker 
of uitgebreider dan het andere. Er bestaan natuurlijk ook program- 
ma’s die beide eigenschappen verenigen, maar daar betaal je dan vaak 
letterlijk een prijs voor. Dankzij de openbrongemeenschap kunnen we 
echter ook een beroep doen op gratis tools, die hun professionele 
collega's qua mogelijkheden en gebruiksvriendelijkheid op de voet 
volgen. Een voorbeeld is KompoZer, een WYSIWYG-editor die gebaseerd is op Nvu, een 
stopgezet project van de Mozilla Foundation. KompoZer doet in de verte denken aan 
Dreamweaver van Adobe en Expression Web van Microsoft, al is het uiteraard niet voorzien 
van alle toeters en bellen die deze twee toppers in huis hebben. Toch bevat dit bouwpak- 
ket meer dan genoeg onderdelen om een fraaie webstek in elkaar te knutselen. In deze 
cursus zetten we een basiswebsite in elkaar voor basketbalclub Alley Oop. 


Door de exponentiële groei van onder andere online video geraakt het internet steeds voller, maar 
een paar websites kunnen er altijd nog wel bij. In deze cursus maken we je wegwijs in de gratis 


J BEC Alley Oop Pleeg 


pder 
Bestand Dewerkan Deekd Geschiedenis Madwizers Extra Help 


@ GE Lo amemzoseuwgsgredertaBr anti) gnlstalskeg Herl 


WEGWIJS IN DE INTERFACE 


Telkens je KompoZer opstart, krijg je een venstertje met een tip-van-de-dag. Wil je 
dat niet te zien krijgen, dan verwijder je het vinkje bij Show tips At staRTUP. Met een 
druk op Crose sluit je het venster en beland je in de interface. Net onder de menubalk 
zie je wat KompoZer de Composition Toolbar @® noemt. Daar vind je enkele handige 
snelkoppelingen om bijvoorbeeld een nieuwe pagina aan te maken, de huidige pagina 
te bewaren of een link in te voegen. Onder de Composition Toolbar zie je twee zoge- 
naamde Format Toolbars @, die voornamelijk functies herbergen om de tekst mee te 
bewerken. Het grootste deel van de interface wordt logischerwijs ingenomen door het 
werkblad ®. Dat wordt aan de linkerkant geflankeerd door de Site Manager @, waar 
je de bestanden van je website in boomstructuur te zien zal krijgen eens ze geüpload 
zijn. Voorlopig heb je daar niets aan, dus sluit hem door op de Fg-toets van je toet- 


senbord te drukken. Met die knop roep je hem ook even eenvoudig weer op. 


® untitled - KompoZer 


Ee ER Wow Inet Fomst Tale Jook beb 


Body Text sl \(nodess) wi LU FEIT eK = 
varsttewdh vB es A BIUEFAN 


porrmat [EE mna rags IT source | preven [ 


De interface van KompoZer zit vrij simpel in elkaar. 


Het werkblad 


Nu neemt het werkblad de volledige breedte van je scherm in. Onder- 
aan het werkblad zie je vier tabbladen: Norma, HTML Taas, Source en 
Preview. Daarmee kan je je website op verschillende manieren bewer- 
ken. Normar is de gewone WYSIWYG-modus, terwijl HTML Taas met 
gele blokken aanduidt welke html-tags je waar gebruikt. Source toont 
je de broncode, en Preview laat je zien hoe je website er op het in- 
ternet zal uitzien. Normaal gezien volstaat de Normar-view. De ver- 
schillende pagina’s die je aanmaakt, worden weergegeven in tab- 
bladen bovenaan. Voorlopig is er maar eentje geopend, met de naam 
(untitled). Die tabbladen werken net als die in Internet Explorer 7 
of Firefox. Om het huidige tabblad te sluiten, klik je aan de rechter- 
kant op het rode kruis. 

Vlak boven het witte werkvlak zie je een brede witte balk met 
daarin een getal en px erachter. Dat getal geeft aan hoeveel pixels 
de balk breed is. Aan de linkerkant zie je een gelijkaardige, verti- 
cale balk die een pak korter is. Met deze twee hulplijnen kan je in 
één oogopslag zien hoe hoog en hoe breed je website is. Zo kan je 
in de gaten houden dat je site bijvoorbeeld ook goed te bekijken is 
door mensen met een lagere schermresolutie. Als je een tabel aan- 


ga. Een bestaande website openen 


Wil je een tastbaar voorbeeld van de vier bewerkingsmodi, 
klik dan in het Frue-menu op OPEN weB LOCATION, geef in het dialoog- 
venster in en klik op Create. De Clickx-home- 
page wordt geladen, en je kan de structuur ervan bekijken met 
de vier tabbladen onderaan het werkblad. 


Een pagina bewaren 


Om te beginnen gaan we onze eerste, lege pagina al eens opslaan. 
Klik in het menu op Fire en vervolgens op Save As. Nu moet je de 
pagina een titel geven. Best geef je een betekenisvolle titel op, 
zodat je beter scoort in zoekmachines. Aangezien we beginnen met 
onze openingspagina, waar ook de nieuwtjes op komen te staan, is 
een titel als BBC Aurev Oop — Nieuws het meest logische. Druk op OK 
om te bevestigen. Er wordt een nieuw kadertje geopend, waarin je 
het bestand een naam moet geven. De startpagina van een website 
moet index.html heten, anders wordt hij op het internet niet her- 
kend als zijnde de beginpagina en krijg je problemen. Wijzig de naam 
dus in INpex.ntML en klik op Opstaan. Zorg wel dat je het bestand in 
de juiste map opslaat. Als je aan de pagina begint te werken, zal je 
zien dat er in de tab bovenaan een icoontje van een rode diskette 
verschijnt. Dat wil zeggen dat je veranderingen nog niet bewaard 
zijn. Druk dus regelmatig op de grote Save-knop in de Composition 
Toolbar. 


Page Title 


3) Please enter a title for the current page. 


This identifies the page in the window title and bookmarks. 
Dit is ook de 


titel die je site 
op internet zal 
krijgen. 


BBC Alley Oop - Nieuws 


mce 


€ 
Imma DE erm rage | ssc | Prevte| 


Html-junkies kunnen hun hart ophalen in het Source-tabblad onderaan. 


maakt, kan je in deze balken zien hoe breed en hoe hoog je rijen en 
kolommen zijn. 


Afbeeldingen invoegen 


Image Properties 


(Location | Dimensions Appearance | Link 


Image Location: 
file: [/C:Documents%20and%20Settings/frederikm/Bureaubladysit: pd 


Tooltip: 
© Alternate text: |Logo BBC Alley Oopl 


O Don't use alternate text 


Image Preview 


Actual Size: 
Ce Lt u Width: 500 
Height: 197 


Je krijgt meteen 
te zien hoe groot 
de afbeelding is. 


Bovenaan onze pagina voegen we het logo van onze basketbalclub in. 
Dat vind je bij de AanvuLwers op onze website Best maak 
je binnen de map van je website een nieuwe map aan met een naam 
als Afbeeldingen of Images. Download het logo naar die map en klik in 
de Composition Toolbar van KompoZer op het Imace-knopje. Er komt een 
dialoogvenster tevoorschijn, waar je weer op het mapicoon moet klik- 
ken om te bladeren naar de afbeelding die je wil invoegen. Standaard 
staat in het dialoogvenster ook ALtERNATE TEXT aangestipt. In dat veld 
kan je informatie over de afbeelding opnemen. Dat is niet alleen handig 
voor slechtziende mensen die je website met een zogenaamde screen- 
reader bezoeken, maar ook om beter gevonden te worden door zoek- 
machines. In dit geval zou bijvoorbeeld Loco BBC Attey Oop niet misstaan 
als alternatieve tekst. Wil je geen beschrijving ingeven, dan stip je Don’t 
USE ALTERNATE TEXT aan. In de tabbladen bovenaan kan je nog andere ei- 
genschappen van de afbeelding aanpassen, maar dat is in dit geval niet 
nodig. Druk op OK om de afbeelding in te voegen. Heb je geen Alternate 
tekst ingegeven, en ben je vergeten om Don'T UsE ALTERNATE TEXT aan te 
stippen, dan krijg je een waarschuwingskadertje te zien. Op de witte 
achtergrond oogt het logo misschien niet zo spectaculair, maar daar 
passen we straks met behulp van css een mouw aan. 
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Een menu bouwen 


Onder het logo maken we een menu waarmee 
de bezoekers door onze site kunnen navigeren. 
Op dit moment staat de cursor nog te blinken 
naast het logo, maar met een druk op de 
Rerurn-toets kom je een regeltje lager terecht. 
Nu kan je de verschillende menu-items typen. 
In deze cursus beperken we onze website tot 
drie pagina’s, namelijk Nieuws (de openingspa- 
gina), Pros en Contact. Druk tussen elk menu- 
item twee keer op de Tag-toets om er wat 
ruimte tussen te laten. Nu moet je de menu- 
items linken naar hun doelpagina’s. Selecteer 
het eerste item (Nieuws) en druk in de Com- 
position Toolbar op Link, net naast Anchor. In 
het dialoogvenster kan je bepalen waar dat 
item naar moet linken. Als je de pagina in 
kwestie al hebt aangemaakt, dan kan je er met 
het mapicoontje naartoe bladeren. Bestaat de 
pagina nog niet, dan kan je in het invulveld 
zelf de toekomstige naam invullen. Nieuws 
moet gewoon naar onze openingspagina wij- 
zen, dus je kan bladeren naar Inpex.ntML. Als je 
linkt naar een e-mailadres, logisch voor een 
contactpagina, dan moet je nog een vinkje 
zetten bij THE ABOVE IS AN EMAIL ADDRESS. Link je 
naar een pagina buiten je eigen website, dan 
zet je onder Tarcer best een vinkje bij Link rs 
TO BE OPENED @n kies je in het uitklapmenu voor 


Link Properties 


Link Text 
Nieuws 


Link Location 


Enter a web page location, a local file, an email address, or select a Named 
Anchor or Heading from the popup list: 


[index.html 


Plo EE Target 


L] The above is an email address 


Met dit venster kan je links toevoegen. 


IN A NEW WINDOW. Zo ben je zeker dat jouw site 
ook geopend blijft. Met een druk op OK sluit 
je het dialoogvenster en is de link aangemaakt. 
Hetzelfde doe je nu voor Ploeg en Contact, die 
je respectievelijk naar Proea.ntmL en Conracr. 


__ More Properties 


Advanced Edit 


HTML laat linken. Die pagina’s maken we straks 
nog aan. Typ onder het menu ook een korte 
welkomsttekst voor je bezoekers. Dat maakt 
het kiezen van de juiste lay-out er zo meteen 
wat makkelijker op. 


Een stylesheet aanmaken 


Met css giet je de hele opmaak van je website in één bestand. Op elke 
pagina bouw je dan een verwijzing naar dat bestand in. Wil je een 
wijziging doorvoeren in de lay-out van je site, dan hoef je enkel de css 
aan te passen. Alle aanpassingen gebeuren dan automatisch op alle 
pagina’s. Om een stylesheet aan te maken, druk je in de Composition 
Toolbar op CaScapeS, de meest rechtse knop. In het dialoog- 
venster zie je aan de linkerkant INTERNAL STYLESHEET staan. Dat 
wil zeggen dat alle opmaakeigenschappen die je gaat bepalen 
in de pagina zelf opgeslagen worden. Dat is uiteraard niet 
de bedoeling, want dan moet je voor elke pagina apart de 
lay-out gaan bepalen. Klik daarom aan de rechterkant op het 
tabblad GEneraL en druk vervolgens op de knop Export styLe- 
SHEET AND SWITCH TO EXPORTED VERSION. Nu moet je je stylesheet 
een passende naam geven; best kies je voor pakweg SriaL.css. 
Klik op Opstaan en je zal zien dat Internal stylesheet veran- 
dert in stijl.css. Het opmaken kan beginnen! Klik, nog steeds 
in het css-dialoogvenster, linksboven op het zwarte drie- 
hoekje naast het verfpalet en kies Srvre ruLe uit de lijst. Aan 
de rechterkant krijg je nu vier mogelijkheden. Van boven 
naar onder: een stijl voor een bepaalde tag, een class, een 


ID of een eigen regel. Voor de algemene lay-out van onze website heb- 
ben we de eerste nodig. Zorg dus dat STyLE APPLIED TO ALL ELEMENTS OF TYPE 
is aangestipt en kies onderaan in het uitklapmenu voor sony (Booy Text). 
Druk op Create Styre rue, en de regel wordt toegevoegd aan je css. Nu 
kan je de eigenschappen van je body gaan bepalen. 


CSS Stylesheets 


Îî 3 (eeneral | Text Ì Background | Borders Ì Box [tits [ Aural 


New Style rule 
@ style applied to all elements of type 


Ord & 
Sheets and rules 
=) Mstijl.css 


e.g. h2 


O style applied to all elements of class 
e‚q. ‚myclass 
Create a new: 
O style applied to an element with specified ID attribute 


e.g. #header 


O custom style rule 


eg, div&header a:hover 


body (Body Text) 
p (Paragraph) 

hi (Heading 1} 
h2 (Heading 2} 

h3 (Heading 3} 

h4 (Heading 4) 

h5 (Heading 5) 

hé (Heading 6) 
address (Address) 
pre (Preformat) 


Het ziet er allemaal wat 
ingewikkelder uit dan het is. 
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Een achtergrond toevoegen 


Om te beginnen gaan we onze website voorzien van een achtergrond- 
afbeelding. Voor een website van een basketbalclub lijkt een par- 
ketachtige achtergrond ons wel geschikt. Die vinden we in het Ab- 
solute Background Textures Archive 
waar we bij Woop op [Pace 5] woop057.spe vinden. Zorg ervoor dat je 
nooit een te druk patroon kiest; een achtergrond moet onopvallend 
zijn en de tekst die je in je website typt, moet leesbaar blijven. Sla 
het plaatje op in de afbeeldingenmap van je website door er met je 
rechtermuisknop op te klikken en OpsLaan ALs te kiezen. 

Open opnieuw het css-dialoogvenster, selecteer Booy en Klik op het 
tabblad Backeroun. Als je gewoon een kleur als achtergrond wil, 
klik je op het witte vlakje naast Coror. Om een afbeelding te ge- 
bruiken, klik je op de knop Cnoose Fire en blader je naar het ge- 
downloade patroon. Zodra je op OK klikt, wordt je site gevuld met 
de achtergrond en kan je zien of het een goede keuze is. Wil je 
het patroon enkel horizontaal laten herhalen, dan kies je bij True 
voor HorIzoNTALLY. Voor een verticale herhaling klik je uiteraard op 
verTIcALLY. Wij kiezen hier voor HORIZONTALLY AND VERTICALLY. Als je een 
vaste achtergrond wil (eentje die niet meebeweegt als je scrollt 
in je website), dan verwijder je het vinkje bij IMAGE SCROLLS WITH THE 
PAGE. Onderaan kan je de uitlijning van je achtergrond bepalen, wat 
handig is als je bijvoorbeeld een logo perfect in het midden van 
je website wil hebben. Dan stip je tweemaal Center aan. 


CSS Stylesheets 


Ord ZA & 1 4 (General rex | Beciaround [gorders [Box [uiste [Aural] 


Sheets and rules Color: 


=gstij.ess Opacty: € BL 


Image: _\mgfwood057,jpg [Choose file 


Tile: horizontally and vertically vl 


(V] image scrolls with the page 


Position: Oteft @ center O Richt 


© Top 
© Center 
O Bottom 


Be) 


Met een leuke achtergrond ziet je site er meteen een pak beter uit. 


Links 


Om onze links vorm te geven, maken we een nieuwe stijl aan in onze 
css. Druk opnieuw op de CaScapeS-knop om het dialoogvenster te ope- 
nen, klik vervolgens op het zwarte driehoekje naast het verfpalet en 
kies voor Sryre ruLe. Dit keer staat de gezochte tag niet in de uitklap- 
lijst, maar moet je hem zelf in het veld ingeven. De tag voor een link 
is simpelweg A, dus typ dat in het veldje en klik op CREATE STyLE RULE. 
Net als bij de body-tag, selecteer je de a-tag en klik je op het tabblad 
Text. Links nemen sowieso automatisch de eigenschappen van body 
over, en dus moet je de Font size en de Line height niet meer instellen. 
Klik op het grijze vierkant naast Coror en kies een leuke kleur uit voor 


De algemene paginaopmaak 


CSS Stylesheets 


Ord A & Î 8 | General | Text | Background | Borders | Box | Lists | Aural 


Sheets and rules Font Family: Font weight: | unspecified 
=) stijl.css O unspecified 


Font style: unspecified 
body @ predefined: 


- - - Case: unspecified 
Arial, Helvetica, sans-serif E 


Alignment: unspecified 


O Use custom Font family: 


Text decorations: 
L] overline m, 
Fontsize: |12px ] Line-through 


Line height: | Underline 
L] Blinkina 


Color: 


fax jumps over the lazy dag 


De opmaakmogelijkheden in css zijn eindeloos. 


Om de tekst van je website op te maken, moet je uiteraard in het 
tabblad Text zijn. Hier kan je de eigenschappen bepalen van het 
lettertype dat je zal gebruiken. De veranderingen die je doorvoert, 
zie je trouwens meteen in je site gebeuren. Dat maakt het mak- 
kelijker om de juiste keuzes te maken. Zet onder Font FamiLy een 
bolletje bij preperineD en kies voor ArraL, HELVETICA, SANS-SERIF. Je zal 
zien dat het lettertype van je website meteen verandert. Zo kan je 
experimenteren tot alles naar wens is. Je kan ook een speciaal let- 
tertype gebruiken door Use custom Font FaMiLY te kiezen, maar dat 
krijgen je bezoekers dan enkel te zien als ze zelf dat speciale let- 
tertype op hun pc hebben staan. Daaronder kan je bij Font size 
kiezen hoe groot de letters moeten zijn, en zelfs de afstand tussen 
regels aanpassen om de leesbaarheid te verhogen. Als je wil kan je 
de tekstkleur aanpassen door op het grijze blokje naast Coror te 
klikken. Aan de rechterkant krijg je nog andere opmaakmogelijkhe- 
den, maar voor onze bodytekst zijn die niet nodig. Druk op OK en 
sla de pagina op om de veranderingen te bewaren. De veranderingen 
in het css-bestand worden automatisch mee bewaard. 


BBG ALLEY OOP 


.. Marges aanpassen 


Cortact 
op decent tem okei Alley Oop == Wil je dat de tekst van 


je website iets verder van de 
linkerkant van het venster 


afstaat? Dan open je het css- 
dialoogvenster, klik je op 


De kleurverandering van onze links werkt! 


je links. Verander Font werent in Boto en zet onder Text pecoratrons een vinkje bij None om ervoor te zorgen dat links Bopy en vervolgens op het 
niet onderlijnd worden. Als je wil dat links bijvoorbeeld van kleur veranderen als je er met je muisaanwijzer over tabblad Box en voer je bij 
gaat, dan maak je een nieuwe Srvre ruLE aan en typ je A:Hover in het veldje. Selecteer de nieuwe stijl in de lijst en Mareins, Lertr bijvoorbeeld 
verander de kleur in het Text-tabblad. Druk op OK om het css-venster te sluiten. Test het effect even uit door 20PX in. 


je muisaanwijzer over de menulinks te bewegen. 
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el 


Page Properties 


Pagina-eigenschappen 
General information 
Het logo en het menu staan al op hun plaats, maar de Ploeg- en de Contact- gede 
pagina zijn nog niet aangemaakt. Klik in het Frie-menu op Save as en sla de Tie: 
pagina op als Proea.nrmL. Klik vervolgens in het menu op ForMar, PAGE TITLE AND enten 
Properties. Daar zie je dat de pagina nog steeds de titel van je openingspagina ide 
heeft. Verander die dus in BBC Aurev Oop — Proea. Je kan ook je eigen naam 
invullen bij Aurnor. Voor elke pagina kan je eveneens een beschrijving opgeven 
in het Descriprron-veld. Die informatie wordt gebruikt door zoekmachines om je 
site te beschrijven. De andere velden kan je ongemoeid laten. Met een druk op 
OK bevestig je. Doe nu hetzelfde om de Conrtacr-pagina aan te maken. Als je wil, 
kan je de overige pagina’s openen in tabbladen, door in de Composition Toolbar 
op Open te klikken. 


[Bec Alley Oop - Nieuws 
Frederik Meuris 


Dit is de website van basketbalclub Alley Oop. Hier vind je informatie over de 


Templates 


This page is a template 


Internationalization 


n = Choose a lanquage 
Writing direction: | No direction specified 
Choose a charset 


Language: 


Character set: 150-8859-1 
Advanced users: 


To edit other contents of the <head> region, use "HTML Source” in the View Menu or Edit 
Made Toolbar, 


ermat | Fel Htmt Tags 


Je kan later nog rijen en kolommen toevoegen of 


verwijderen. 


Heel de wereld mag weten 
wie deze prachtige site 
heeft gemaakt. 


Tabellen invoegen 


Op de pagina van onze ploeg gaan we twee tabellen maken: eentje om de spelers 
en hun posities op te lijsten en een andere voor de speelkalender. Plaats de 
cursor onder het menu en klik in de Composition Toolbar op Taste. In het tabblad 
QuickLy van het dialoogvenster kan je met de muis aangeven hoe groot de tabel 
moet zijn, met een maximum van 6 rijen en 6 kolommen. Wij hebben iets meer 
rijen nodig, en daarvoor moet je op het tabblad PrecrseLy zijn. Daar kan je precies 
ingeven hoeveel rijen en kolommen je nodig hebt en hoe breed de tabel moet zijn. 
11 rijen en 3 kolommen volstaan, en 500 pixels is breed genoeg. Geef dus 500 in 
bij Wiorn en verander % or winpow in pixeLs. De tabel heeft geen rand nodig, dus 
bij Borper zet je 0. Klik vervolgens op het tabblad Ceuu. Daar kan je de uitlijning 
of ‘alignment’ van je cellen kiezen. Verander de Horzz. AtrenMent in Lerrt. Als je wil, 
kan je ook de Ceuuspacing en CeLLanpinG aanpassen. Cellspacing is het aantal pixels 
tussen de cellen, terwijl Cellpadding de ruimte tussen de inhoud van een cel en 
de randen van die cel aangeeft. Druk op OK om de tabel aan te maken. Aangezien 
hij geen zichtbare rand krijgt, wordt de tabel zichtbaar gemaakt met rode hulp- 
lijnen. Die verdwijnen als je je pagina in 
een webbrowser gaat bekijken. 

In de bovenste rij van de ploegentabel 
vul je de hoofdingen van de drie kolom- 
men in, namelijk Rucnummer, NAAM en Po- 
sitte. Vervolgens kan je de gegevens van 
de spelers toevoegen. Als je de breedte 
van de kolommen wil veranderen, ver- 
sleep je de grijze tussenlijnen in de witte 
hulpbalk boven het werkvlak. Selecteer 
vervolgens de eerste rij door je cursor in 
de eerste cel te plaatsen en te slepen tot 
de drie cellen een blauwe rand hebben 
gekregen. Met de toetsencombinatie 
CrrL+B maak je de inhoud van de cellen 
vet. 


Insert Table 
Size 
Rows: 
Columns: 3 


Width: 500 | pixels 


Border: ‚0 
k 


a. Je site bekijken in je browser 


, Om je site te testen in een browser, sla je de pagina op en druk je vervolgens in 
de Composition Toolbar op Browse. Als er een waarschuwingsvenster voor een External 
Protocol Request komt, klik je op LAUNCH APPLICATION. 
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Ankers 


Ankers zijn links die naar een specifieke plaats binnen 
een webpagina leiden. Zo kan je bovenaan de ploegpa- 
gina een link zetten naar de speelkalender, die onderaan 
staat. Onder de tabel van onze ploeg maken we dus eerst 
een tweede tabel voor de speelkalender. Typ eerst, on- 
der de ploegtabel, het woord Karenper. Selecteer het en 
verander in de eerste Format Toolbar Booy Text in HEADING 
1. Druk op Enter en voeg opnieuw een tabel in van 11 
rijen en 3 kolommen, net zoals je daarnet voor de ploeg 
gedaan hebt. In de linkerkolom zet je nu de thuisploeg, 
in de middelste kolom de uitploeg en in de rechterkolom 
de uitslag. Selecteer nu het titeltje Karenper en klik in 
de Composition Toolbar op Ancnor. Vervolgens moet je 
het anker een naam geven, maar KompoZer zal stan- 
daard Karenper voorstellen, wat uiteraard een goede 
keuze is. Bevestig met OK. Nu moet je nog een link naar 
de kalender toevoegen bovenaan je pagina. Als je wil, kan 
je er zelfs een menu-item van maken. Typ dus bovenaan 
de pagina het woord Karenper, selecteer het en klik in de 
Composition Toolbar op Link. Als je nu het uitklapmenu 
in het dialoogvenster tevoorschijn haalt, zorg je ervoor 
dat er KALENDER in staat. Dat is het anker. Selecteer 
het en druk op OK om de link te maken. Bewaar de 
pagina en bekijk hem in je browser om de link uit te 
testen. In het werkblad zie je boven je kalender nu ook 
een geel vierkantje staan met een anker, om aan te 
geven waar het ankerpunt zich bevindt. 


Named Anchor Properties 


Anchor Name: 
Kalender 


| advanced Edit. 


Een anker is niet zichtbaar in een website, maar tijdens 
het ontwerpen is een klein icoontje wel handig. 


Publiceren 


Je hebt nu een basiswebsite op poten gezet, maar zolang hij enkel op 
de harde schijf van je computer staat, zal je niet veel bezoekers over 
de vloer krijgen. Je moet je website dus op het internet gooien. Nor- 
maal gezien doe je dat met een extern ftp-programma, maar in Kom- 
poZer zit er ook één ingebouwd. Open index.html en klik bovenaan in 
het menu op Fre, Puguisn. In het dialoogvenster moet je bij Sire Name 
een naam voor je site kiezen. Die dient enkel om hem te identificeren 
in KompoZer, om het overzicht te kunnen bewaren als je veel websites 
maakt. Vul hier dus wel een zinnige naam in. Bij WeB Stre INFORMATION 
moet je de url opgeven waar je de website wil publiceren. Maak je 
gebruik van de gratis webruimte van je provider, dan is dat waarschijn- 
lijk iets als Heb je zelf een domein 
geregistreerd, dan vul je dat adres in. Het PugLishing Appress is dan weer 
het ftp-adres dat je bij de registratie van je domeinnaam hebt gekre- 
gen. Gebruik je gratis webruimte, dan vind je het juiste adres wel op 
de site van je provider. Voor Telenet is dat en Bel- 
gacomgebruikers vullen ftp:/lusers.skynet.bd in. Vergeet zeker het prefix 
ftp:// niet! Vervolgens vul je in de juiste velden je gebruikersnaam en 
je wachtwoord in en druk je op Pugrisn. KompoZer zal nu automatisch 
je pagina — en het bijhorende css-bestand — gaan uploaden. Doe dit ook 
met de andere pagina’s, en je website staat online! + 


Publish Page 


Publish 
Site Nae BBC alley O Oop 


Web Site Information 
HTTP address of your homepage (e.g.: ‘http: (fwa. myisp.com/myusername’): 
http: www bbcalleyoop.be 


Publishing Server 
Publishing address (e.g.: ‘ftp: {jftp.myisp.com/myusername'): 


Ftp: {jftp.bbcallevoop.be Select directory 


User name: \webmaster | 


Password: a | [] Save Password 


Zorg dat je alle gegevens juist invult! 


VAKTAAL 


CSS: Techniek om de vormgeving van webpagina's (titels, kadertjes, tekst) te bepalen. De 
css-informatie kan in het html-bestand zelf staan, of kan opgeroepen worden vanuit een 
apart css-bestand. Op deze manier kan je heel snel lay-outwijziginen maken aan je hele 
site, door gewoon even iets te veranderen in dat css-bestand. 


HTML-TAGS: Speciale opmaakcode van elke webpagina. De lay-out van een webpagina wordt 
bepaald door tags. Zo zorgt de tag <b> er bijvoorbeeld voor dat een woord of zin in het vet 
(bold) weergegeven wordt. 


WYSIWYG: What You See Is What You Get. Met een WYSIWYG-editor zie je meteen hoe het 
eindresultaat er zal uitzien. Je moet met andere woorden geen ingewikkelde code gebruiken, 
maar bekijkt onmiddellijk het resultaat. Veel webbouwpakketten zijn uitgerust met een 
WYSIWYG-module, maar ook tekstverwerkers zoals Word zijn WYSIWYG-programma's. 


WORDT VERVOLGD 


Deze inleiding tot KompoZer is de eerste in een reeks cursussen 
en workshops rond webdesign. In de volgende nummers van 
Clickx Magazine bekijken we telkens een ander aspect van het 
bouwproces, zodat je op het einde van de rit trots kan zijn op 
je aanwezigheid op het internet. In de volgende afleveringen van 
deze reeks gaan we meerbepaald dieper in op de hosting en het 
online zetten van je webstek, vertellen we je hoe je bezoekers 
kan aantrekken, hoe je diensten zoals een zoekmachine en een 
forum kan integreren in je site en hoe je te weten kan komen 
wie je stek bezoekt en waar die bezoekers vandaan komen. 


1. HOSTING 
Een domeinnaam registreren en je website uploaden met een 
ftp-client 


2. PROMOTIE 


Je website optimaliseren voor zoekmachines 


3. EXTRA'S TOEVOEGEN 


Diensten aanbieden op je website 


4. BEZOEKERS 
Statistieken bijhouden met Google Analytics 
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